<!DOCTYPE html>
<html charset="utf-8">
<head>
    <title>To Do List App</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
    <style type="text/css">
        body {
            padding: 50px;
            background-color: #66CCFF;
            font-family: sans-serif;
        }

        .todoListMain .header input {
            padding: 10px;
            font-size: 16px;
            border: 2px solid #FFF;
        }

        .todoListMain .header button {
            padding: 10px;
            font-size: 16px;
            margin: 10px;
            background-color: #0066FF;
            color: #FFF;
            border: 2px solid #0066FF;
        }

        .todoListMain .header button:hover {
            background-color: #003399;
            border: 2px solid #003399;
            cursor: pointer;
        }

        .todoListMain .theList {
            list-style: none;
            padding-left: 0;
            width: 255px;
        }

        .todoListMain .theList li {
            color: #333;
            background-color: rgba(255, 2555, 255, .5);
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
<div id="container"></div>
<script type="text/babel">
    var destination = document.querySelector("#container");

    var TodoItems = React.createClass({
        render: function () {
            var todoEntries = this.props.entries;

            function createTasks(item) {
                return (
                    <li key={item.key}>{item.text}</li>
                );
            };

            var listItems = todoEntries.map(createTasks);

            return (
                <ul className="theList">
                    {listItems}
                </ul>
            );
        }
    });

    var ToDoList = React.createClass({
        getInitialState: function () {
            return {
                items: []
            }
        },

        addItem: function (e) {
            var itemArray = this.state.items;
            itemArray.push({
                text: this._inputElement.value,
                key: Date.now()
            });

            this.setState({
                items: itemArray
            });

            this._inputElement.value = "";
            this._inputElement.focus();

            e.preventDefault();
        },

        render: function () {
            return (
                <div className="todoListMain">
                    <div className="header">
                        <form onSubmit={this.addItem}>
                            <input
                                ref={
                                    (a) => this._inputElement
                                        = a
                                }
                                placeholder
                                    ="请输入一个任务"/>
                            <button type="submit">
                                添加
                            </button>
                        </form>
                    </div>

                    <TodoItems entries={this.state.items}/>
                </div>
            );
        }
    });


    ReactDOM.render(
        <ToDoList/>,
        destination
    );
</script>
</body>
</html>